<template>
  <div
    class="mobile-video-call"
    v-if="dialogVisible"
    :style="{ width: winWidth, height: winHeight }"
  >
    <el-button type="text" @click="toggleFullscreen" class="mobile-video-call-fullscreen">
      <img :src="isFullscreen ? max : scale" style="width: 18px" />
    </el-button>

    <iframe
      ref="videoChatIframeRef"
      :src="props.videoURL"
      allow="microphone;camera;midi;encrypted-media;display-capture;"
      @load="onIframeLoad"
    ></iframe>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, onUnmounted, ref } from 'vue';
import max from '@/assets/images/max.png';
import scale from '@/assets/images/scale.png';

const props = defineProps<{
  videoURL: string;
}>();
const emit = defineEmits(['close']);
const dialogVisible = ref(false);
const isFullscreen = ref(true);
const winWidth = ref('100%');
const winHeight = ref('100%');
const videoChatIframeRef = ref<any>(null);
// const videoChatIframeWidth = ref(0);
// let resizeWatchTimer: any = 0;

const showDialog = () => {
  console.log('显示视频通话窗口');
  dialogVisible.value = true;
};

const handleClose = () => {
  dialogVisible.value = false;
  emit('close');
};

const toggleFullscreen = () => {
  isFullscreen.value = !isFullscreen.value;
  if (isFullscreen.value) {
    winWidth.value = '100%';
    winHeight.value = '100%';
  } else {
    winWidth.value = '33%';
    winHeight.value = '33%';
  }
  console.log(`iframe width ${videoChatIframeRef.value.offsetWidth}`);
};

const onIframeLoad = () => {
  console.log('视频控件加载完成');
};

/**
 * 房间连接状态变更
 * @param state "connected" | "connecting" | "disconnected" | "reconnecting"
 */
const onConnectionStateChanged = (state: string) => {
  // 状态变更为断开状态时关闭窗口
  if (state === 'disconnected') {
    handleClose();
  }
};

/**
 * 开启/禁用媒体设备
 *
 * @param trackSource 1 摄像头 2 麦克风 3 屏幕共享
 * @param enable 是否禁用
 */
function openCameraMic(soucreType: number, isMute: boolean) {
  const action = soucreType === 1 ? 'setCameraEnabled' : 'setMicrophoneEnabled';
  sendCommand({ action, data: !isMute });
}

/**
 * 给iframe发控制消息
 * @param message 消息
 */
function sendCommand(message: any) {
  videoChatIframeRef.value.contentWindow.postMessage(message, '*');
}

onMounted(() => {
  // 监听视频窗口发来的消息
  window.addEventListener(
    'message',
    function (event) {
      console.log('Received message: ', event.data);
      const action = event.data.action;
      switch (action) {
        case 'connectionStateChanged':
          onConnectionStateChanged(event.data.data);
          break;
      }
    },
    false
  );
});

onUnmounted(() => {
  window.removeEventListener('message', function () {});
});

defineExpose({
  showDialog,
  handleClose,
  openCameraMic
});
</script>

<style lang="scss">
.mobile-video-call {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 6;

  .mobile-video-call-fullscreen {
    position: absolute;
    padding: 0.15rem;
    background-color: rgba(0, 0, 0, 0.5) !important;
    top: 0.3rem;
    left: 0.3rem;
  }

  iframe {
    border: 1px solid #2b72fe;
    width: 100%;
    height: 100%;

    .lk-grid-layout {
      padding: 0 !important;
    }
  }
}
</style>
